<style>
    :root {
        --primary: #c2185b;
        --secondary: #4a148c;
        --accent: #ff8f00;
        --nature-green: #2e7d32;
        --water-blue: #0288d1;
        --earth-brown: #6d4c41;
        --light-bg: #f9f9f9;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Noto Sans SC', 'Inter', sans-serif;
        background-color: var(--light-bg);
        color: #333;
        padding: 3rem 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
        padding-bottom: 1rem;
        font-weight: 700;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: var(--primary);
        border-radius: 2px;
    }

    .logo-category {
        margin-bottom: 4rem;
        padding: 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .category-title {
        margin-bottom: 2rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--primary);
        font-weight: 600;
        color: #222;
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 2rem;
    }

    /*** logo 基础样式 ****/
    .logo-card {
        background-color: white;
        border-radius: 10px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transition: var(--transition);
        border: 1px solid #f0f0f0;
    }

    .logo-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    }

    .logo-card .logo-container {
        width: 140px;
        height: 140px;
        margin: 0 auto 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }

    /* 中文Logo样式 */
    .logo-card .chinese-logo {
        font-family: 'Noto Serif SC', 'SimSun', serif;
        font-weight: 700;
        color: white;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* 背景样式 */
    .logo-card .bg-cherry {
        background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    }

    .logo-card .bg-bamboo {
        background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    }

    .logo-card .bg-pine {
        background: linear-gradient(135deg, #795548 0%, #4e342e 100%);
    }

    .logo-card .bg-plum {
        background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);
    }

    .logo-card .bg-orchid {
        background: linear-gradient(135deg, #3f51b5 0%, #283593 100%);
    }

    .logo-card .bg-crane {
        background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%);
    }

    .logo-card .bg-tiger {
        background: linear-gradient(135deg, #ff9800 0%, #e65100 100%);
    }

    .logo-card .bg-deer {
        background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%);
    }

    .logo-card .bg-lotus {
        background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    }

    .logo-card .bg-peony {
        background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    }

    /* 动植物图标样式 */
    .nature-icon {
        color: white;
        font-size: 4rem;
        transition: var(--transition);
    }

    /* 物品图标样式 */
    .logo-card .object-icon {
        color: white;
        font-size: 3.5rem;
        transition: var(--transition);
    }

    .logo-card .logo-name {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #222;
    }

    .logo-card .logo-desc {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 0;
    }

    /* 特殊形状 */
    .logo-card .shape-circle {
        border-radius: 50%;
    }

    .logo-card .shape-square {
        border-radius: 4px;
    }

    .logo-card .shape-hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .logo-card .shape-teardrop {
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

    .logo-card .chinese-logo:hover, .logo-card .nature-icon:hover, .logo-card .object-icon:hover {
        transform: scale(1.15) rotate(5deg);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .logo-card .logo-container {
            width: 110px;
            height: 110px;
        }

        .logo-card .chinese-logo {
            font-size: 2.5rem;
        }

        .logo-card .nature-icon, .logo-card .object-icon {
            font-size: 3rem;
        }

    }
</style>


<div class="container">
    <h1 class="section-title">中文及自然元素Logo设计展示</h1>

    <!-- 中文Logo展示 -->
    <div class="logo-category">
        <h2 class="category-title">中文Logo设计</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-cherry shape-circle">
                    <span class="chinese-logo" style="font-size: 3.5rem;">友</span>
                </div>
                <h3 class="logo-name">友联</h3>
                <p class="logo-desc">友好连接，社交平台</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-bamboo shape-square">
                    <span class="chinese-logo" style="font-size: 3rem;">聊</span>
                </div>
                <h3 class="logo-name">闲聊</h3>
                <p class="logo-desc">轻松聊天，分享生活</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-plum shape-hexagon">
                    <span class="chinese-logo" style="font-size: 3rem;">圈</span>
                </div>
                <h3 class="logo-name">朋友圈</h3>
                <p class="logo-desc">私人社交圈，分享点滴</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-orchid shape-teardrop">
                    <span class="chinese-logo" style="font-size: 3rem;">聚</span>
                </div>
                <h3 class="logo-name">相聚</h3>
                <p class="logo-desc">兴趣相聚，话题交流</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-pine shape-square">
                    <span class="chinese-logo" style="font-size: 2.8rem;">知</span>
                </div>
                <h3 class="logo-name">知遇</h3>
                <p class="logo-desc">知识分享，遇见同好</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-crane shape-circle">
                    <span class="chinese-logo" style="font-size: 3.2rem;">言</span>
                </div>
                <h3 class="logo-name">言者</h3>
                <p class="logo-desc">言论自由，思想交流</p>
            </div>
        </div>
    </div>

    <!-- 动物元素Logo -->
    <div class="logo-category">
        <h2 class="category-title">动物元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-crane shape-circle">
                    <i class="fas fa-dove nature-icon"></i>
                </div>
                <h3 class="logo-name">白鸽社交</h3>
                <p class="logo-desc">和平交流，友善沟通</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-tiger shape-square">
                    <i class="fas fa-paw nature-icon"></i>
                </div>
                <h3 class="logo-name">虎跃</h3>
                <p class="logo-desc">活力社交，积极互动</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-deer shape-hexagon">
                    <i class="fas fa-deer nature-icon"></i>
                </div>
                <h3 class="logo-name">鹿鸣</h3>
                <p class="logo-desc">雅士云集，知音相遇</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-plum shape-teardrop">
                    <i class="fas fa-butterfly nature-icon"></i>
                </div>
                <h3 class="logo-name">蝶舞</h3>
                <p class="logo-desc">多彩生活，精彩社交</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-cherry shape-circle">
                    <i class="fas fa-fish nature-icon"></i>
                </div>
                <h3 class="logo-name">鱼群</h3>
                <p class="logo-desc">群体社交，兴趣聚集</p>
            </div>
        </div>
    </div>

    <!-- 植物元素Logo -->
    <div class="logo-category">
        <h2 class="category-title">植物元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-bamboo shape-square">
                    <i class="fas fa-seedling nature-icon"></i>
                </div>
                <h3 class="logo-name">竹友</h3>
                <p class="logo-desc">君子之交，清雅社交</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-lotus shape-circle">
                    <i class="fas fa-leaf nature-icon"></i>
                </div>
                <h3 class="logo-name">莲语</h3>
                <p class="logo-desc">纯净社交，真诚交流</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-peony shape-teardrop">
                    <i class="fas fa-pagelines nature-icon"></i>
                </div>
                <h3 class="logo-name">牡丹坊</h3>
                <p class="logo-desc">高端社交，品质生活</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-pine shape-hexagon">
                    <i class="fas fa-tree nature-icon"></i>
                </div>
                <h3 class="logo-name">松社</h3>
                <p class="logo-desc">长久友谊，稳固社交</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-orchid shape-square">
                    <i class="fas fa-flower nature-icon"></i>
                </div>
                <h3 class="logo-name">兰集</h3>
                <p class="logo-desc">文人雅集，兴趣社交</p>
            </div>
        </div>
    </div>

    <!-- 物品元素Logo -->
    <div class="logo-category">
        <h2 class="category-title">物品元素Logo</h2>
        <div class="logo-grid">
            <div class="logo-card">
                <div class="logo-container bg-crane shape-circle">
                    <i class="fas fa-paper-plane object-icon"></i>
                </div>
                <h3 class="logo-name">纸鸢</h3>
                <p class="logo-desc">信息传递，连接你我</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-plum shape-square">
                    <i class="fas fa-lantern object-icon"></i>
                </div>
                <h3 class="logo-name">灯语</h3>
                <p class="logo-desc">点亮社交，温暖相遇</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-cherry shape-hexagon">
                    <i class="fas fa-pen-fancy object-icon"></i>
                </div>
                <h3 class="logo-name">笔墨</h3>
                <p class="logo-desc">文字社交，思想碰撞</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-bamboo shape-teardrop">
                    <i class="fas fa-bridge object-icon"></i>
                </div>
                <h3 class="logo-name">桥连</h3>
                <p class="logo-desc">连接心灵，跨越距离</p>
            </div>

            <div class="logo-card">
                <div class="logo-container bg-tiger shape-circle">
                    <i class="fas fa-compass object-icon"></i>
                </div>
                <h3 class="logo-name">指南</h3>
                <p class="logo-desc">发现兴趣，找到同好</p>
            </div>
        </div>
    </div>
</div>

